<template>
    <div class="board">
        <div v-for="item in list" class="itemlist">
            <div class="itemtop">
                <div>
                    <div class="itemtitle">{{ item.name }}</div>
                    <div class="itemdesc">{{ item.description }}</div>

                </div>
                <div class="cover">
                    <img :src="item.cover" alt="">
                </div>
            </div>
            <div>

                <el-button type="primary" :icon="Setting" @click="yulan(item.id)" plain>作答</el-button>
            </div>

        </div>

    </div>

</template>
<script setup>
import { onMounted, ref } from 'vue';
import { Setting } from '@element-plus/icons-vue'
import service from '../request/Request';
import router from '../router';
const list = ref([])
onMounted(() => {
    getlist()
})
const getlist = async () => {
    const res = await service.get("/paperuser/userlist");
    console.log(res);
    list.value = res.data
}
const yulan = (id) => {
    router.push({
        path: "/answer",
        query: {
            id: id
        }
    })
}

</script>
<style scoped>
.board {
    width: 80%;
    margin: 0 auto;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.itemlist {
    width: 30%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    margin-right: 10px;
    background: #fff;
    border-radius: 10px;
}

.itemtop {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.cover {
    width: 100px;
    height: 100px;
}

.cover img {
    width: 100%;
    height: 100%;
}

.itemtitle {
    font-size: 20px;

}

.itemdesc {
    font-size: 13px;
    color: #999;
    margin-top: 20px;
}
</style>
